﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title></title>
    <link href="../src/css/rayui.css" rel="stylesheet" />
    <script src="../plugins/jquery-1.12.4.js"></script>
    <script src="../src/js/rayui.js"></script>
    <style>
        body {
            padding: 20px;
            margin: 0 auto;
        }
    </style>
</head>
<body>

    <a class="btn-link" href="#anchor">使用说明</a>
    <br />
    <br />

    <h3 class="spliter">
        修改数据后重新渲染
        <a class="rayui-btn btn-success getFormData" data-formid="4">form序列化</a>
        <a class="rayui-btn btn-warning" id="addData">添加数据并重新渲染</a>
    </h3>
    <form id="form4">
        <div class="row ">
            <div class="col-sm-4 col-xs-12">
                <h4>1、默认select</h4>
                <select class="rayui-select" name="Form4ResetSelect1" id="form4Sel1">
                    <option value="">请选择</option>
                    <option value="1">option1</option>
                    <option value="2">option2</option>
                    <option value="3">option3</option>
                    <option value="4" disabled="disabled">option4</option>
                    <option value="5">option5</option>
                    <option value="6">option6</option>
                </select>
                <a class="rayui-btn btn-primary getSelect">获取选中值</a>

            </div>
            <div class="col-sm-4 col-xs-12">
                <h4>2、ul转select</h4>
                <ul class="rayui-select" name="Form4ResetULSelect2" id="form4Sel2">
                    <li value="">请选择</li>
                    <li value="1">option1</li>
                    <li label="分组1">
                        <ul>
                            <li value="11" disabled>分组1-option11</li>
                            <li value="12">分组1-option12</li>
                        </ul>
                    </li>
                    <li value="2">option2</li>
                    <li value="3">option3</li>
                    <li value="4">option4</li>
                </ul>
                <a class="rayui-btn btn-primary getSelect">获取选中值</a>

            </div>

            <div class="col-sm-4 col-xs-12">
                <h4>3、原生select多选</h4>
                <select class="rayui-select full-width" name="Form4MultiSelect3" id="form4Sel3" multiple rayui-search>
                    <option value="">请选择</option>
                    <option value="1">option1</option>
                    <option value="2" selected>option2</option>
                    <option value="3" selected>option3</option>
                    <option value="4" disabled="disabled">option4</option>
                    <option value="5">option5</option>
                    <option value="6">option6</option>
                </select>
                <a class="rayui-btn btn-primary getSelect">获取选中值</a>
            </div>
        </div>
    </form>

    <h3 class="spliter"> select 多选系列<a class="rayui-btn btn-success getFormData" data-formid="3">form序列化</a></h3>
    <form id="form3">
        <div class="row ">
            <div class="col-sm-6 col-xs-12">
                <h4>1、原生select，有"请选择"项，选择过多时可以左右移动</h4>
                <select class="rayui-select full-width" name="Form3MultiSelect1" multiple rayui-search>
                    <option value="">请选择</option>
                    <option value="1">option1</option>
                    <option value="2" selected>option2</option>
                    <optgroup label="分组1">
                        <option value="11" selected>分组1-option11</option>
                        <option value="12">分组1-option12</option>
                    </optgroup>
                    <option value="3">option3</option>
                    <option value="4" disabled="disabled">option4</option>
                    <option value="5" selected>option5</option>
                    <optgroup label="分组2">
                        <option value="21">分组1-option21</option>
                        <option value="22">分组1-option22</option>
                    </optgroup>
                    <option value="6">option6</option>
                </select>
                <a class="rayui-btn btn-primary getSelect">获取选中值</a>
            </div>
            <div class="col-sm-6  col-xs-12">
                <h4>2、select-ul转化，无"请选择"项</h4>
                <ul class="rayui-select full-width" name="Form3ULMultiSelect2" multiple rayui-search>
                    <li value="1">option1</li>
                    <li label="分组1">
                        <ul>
                            <li value="11" disabled>分组1-option11</li>
                            <li value="12">分组1-option12</li>
                        </ul>
                    </li>
                    <li value="2" selected>option2</li>
                    <li value="3">option3</li>
                    <li value="4" selected>option4</li>
                    <li value="5">option5</li>
                    <li value="6">option6</li>
                </ul>
                <a class="rayui-btn btn-primary getSelect">获取选中值</a>
            </div>
        </div>
    </form>

    <h3 class="spliter"> select ul系列，选中、禁用和原生select一致<a class="rayui-btn btn-success getFormData" data-formid="2">form序列化</a></h3>
    <form id="form2">
        <div class="row ">
            <div class="col-sm-4">
                <h4>1、无默认值，有li-label属性</h4>
                <ul class="rayui-select" name="Form2ULSelect1">
                    <li value="">请选择</li>
                    <li value="1">option1</li>
                    <li label="分组1">
                        <ul>
                            <li value="11" disabled>分组1-option11</li>
                            <li value="12">分组1-option12</li>
                        </ul>
                    </li>
                    <li value="2">option2</li>
                    <li value="3">option3</li>
                    <li value="4">option4</li>
                </ul>
                <a class="rayui-btn btn-primary getSelect">获取选中值</a>

            </div>
            <div class="col-sm-4">
                <h4>2、有默认值，过滤数据</h4>
                <ul class="rayui-select" name="Form2ULSelect2" rayui-search>
                    <li value="">请选择</li>
                    <li value="1">option1</li>
                    <li label="分组1">
                        <ul>
                            <li value="11" disabled>分组1-option11</li>
                            <li value="12">分组1-option12</li>
                        </ul>
                    </li>
                    <li value="2" selected>option2</li>
                    <li value="3">option3</li>
                    <li value="4">option4</li>
                </ul>
                <a class="rayui-btn btn-primary getSelect">获取选中值</a>

            </div>
            <div class="col-sm-4">
                <h4>3、图片显示，监听选中事件</h4>
                <ul class="rayui-select" name="Form2ULSelect3" rayui-search ray-event="ImageEvent">
                    <li value="">请选择</li>
                    <li value="1"><img style="width: 16px;" src="/images/1.png" /></li>
                    <li value="2"><img style="width: 16px;" src="/images/1.png" /><img style="width: 16px;" src="/images/1.png" /></li>
                    <li value="3" selected><img style="width: 16px;" src="/images/1.png" /><img style="width: 16px;" src="/images/1.png" /><img style="width: 16px;" src="/images/1.png" /></li>
                    <li value="4"><img style="width: 16px;" src="/images/1.png" /><img style="width: 16px;" src="/images/1.png" /><img style="width: 16px;" src="/images/1.png" /><img style="width: 16px;" src="/images/1.png" /></li>
                </ul>
                <a class="rayui-btn btn-primary getSelect">获取选中值</a>

            </div>
        </div>
    </form>

    <h3 class="spliter"> select 默认系列<a class="rayui-btn btn-success getFormData" data-formid="1">form序列化</a></h3>
    <form id="form1">
        <div class="row">
            <div class="col-sm-4">
                <h4>1、无默认值，没有optgroup</h4>
                <select class="rayui-select" name="Form1Select1">
                    <option value="">请选择</option>
                    <option value="1">option1</option>
                    <option value="2">option2</option>
                    <option value="3">option3</option>
                    <option value="4" disabled="disabled">option4</option>
                    <option value="5">option5</option>
                    <option value="6">option6</option>
                </select>
                <a class="rayui-btn btn-primary getSelect">获取选中值</a>

            </div>
            <div class="col-sm-4">
                <h4>2、有默认值，有optgroup</h4>
                <select class="rayui-select" name="Form1Select2">
                    <option value="">请选择</option>
                    <option value="1">option1</option>
                    <option value="2">option2</option>
                    <optgroup label="分组1">
                        <option value="11" selected="selected">分组1-option11</option>
                        <option value="12">分组1-option12</option>
                    </optgroup>
                    <option value="3">option3</option>
                    <option value="4" disabled="disabled">option4</option>
                    <option value="5">option5</option>
                    <optgroup label="分组2">
                        <option value="21">分组1-option21</option>
                        <option value="22">分组1-option22</option>
                    </optgroup>
                    <option value="6">option6</option>
                </select>
                <a class="rayui-btn btn-primary getSelect">获取选中值</a>

            </div>
            <div class="col-sm-4">

                <h4>3、过滤数据</h4>
                <select class="rayui-select" name="Form1Select3" rayui-search>
                    <option value="">请选择</option>
                    <option value="1">option1</option>
                    <option value="2" selected>option2</option>
                    <optgroup label="分组1">
                        <option value="11">分组1-option11</option>
                        <option value="12">分组1-option12</option>
                    </optgroup>
                    <option value="3">option3</option>
                    <option value="4" disabled="disabled">option4</option>
                    <option value="5">option5</option>
                    <optgroup label="分组2">
                        <option value="21">分组1-option21</option>
                        <option value="22">分组1-option22</option>
                    </optgroup>
                    <option value="6">option6</option>
                </select>
                <a class="rayui-btn btn-primary getSelect">获取选中值</a>

            </div>
        </div>
    </form>

    <script>
        rayui.use(["jqlibs", "select", "layer"], function () {

            var select = rayui.select,
                layer = rayui.layer;

            select.render();
            select.on("click", function (obj) {
                //obj包含:isSingle, event，elem，value，html ,  后面是多选：selected, values，textes
                var str = obj.isSingle ? "我是单选框" : "我是多选框";
                str += "<br/>event：" + obj.event + "<br/>";
                str += "value：" + obj.value + "<br/>";
                str += "html：" + obj.html + "<br/>";
                if (!obj.isSingle) {

                    str += "selected：" + obj.selected + "<br/>";
                    str += "values：" + obj.values + "<br/>";
                    str += "textes：" + obj.textes + "<br/>";
                }
                layer.alert(str, {
                    shade: false,
                    shadeClose: true,
                    btns: ["关闭全部"],
                    btn0: function () {
                        layer.closeAll();
                    }
                });
            });
            $(function () {
                $(".getSelect").click(function () {
                    var val = $(this).prev().prev().val();
                    layer.alert("select选中值为：" + val);
                });
                $(".getFormData").click(function () {
                    var formid = $(this).data("formid");
                    var json = $("#form" + formid).serializeJson();
                    layer.alert(JSON.stringify(json));
                });
                var addIndex = 1000;
                $("#addData").click(function () {
                    $("#form4Sel1").append('<option value=' + addIndex + '>新加数据' + addIndex + '</option>');
                    $("#form4Sel2").append('<li value=' + addIndex + '>新加数据' + addIndex + '</li>');
                    $("#form4Sel3").append('<option value=' + addIndex + '>新加数据' + addIndex + '</option>');
                    addIndex++;
                    select.render("", "#form4");
                });
            });

        })

    </script>

    <div class="card card-color-orange">
        select支持的属性包括：
        <p class="padding-left-15">1、option的selected和disabled，相应的可以在li标签上使用selected和disabled属性</p>
        <p class="padding-left-15">2：select的optgroup（主要是label属性），相应的可以在li标签上使用label属性</p>
        <p class="padding-left-15">3：select的multiple多选，不支持size，相应的可以在UL标签上使用multiple属性</p>
    </div>


    <h4 id="anchor">使用说明</h4>
    <pre style="color: #159200; word-wrap: break-word; white-space: pre-wrap;">

使用说明：

属性：
rayui-search：是否要支持内容搜索功能
ray-event：监听click事件标记
skin：皮肤支持，可以添加skin参数扩展皮肤

方法：
on:function (event, callback, container)：
            event:事件绑定函数，现在只支持click事件，需要配合ray-event使用
            callback:function(obj)， obj包含：
                            isSingle: 是否是单选，true|false
                            event: ray-event值,
                            elem: 原始select,
                            value: 当前选中值,
                            html: 当前选中html，
                            selected: 是否选中，true|false代表选中和取消选中，多选时含有
                            values: 所有选中值，多选时含有
                            textes: 所有选中显示，多选时含有
render:function(type, container)：type可选select|ul，container可填可不填，填写可以实现渲染指定容器内的select

其他：
select ul系列，原生option标签不支持其他标签，比如img，此时可以使用ul和li标签实现，
    数据格式如下：
    &lt;ul name="UserType" rayui-search>
        &lt;li value="">请选择&lt;/li>
        &lt;li value="1">option1&lt;/li>
        &lt;li label="分组1">
            &lt;ul>
                &lt;li value="11" disabled>分组1-option11&lt;/li>
                &lt;li value="12">分组1-option12&lt;/li>
            &lt;/ul>
        &lt;/li>
        &lt;li value="2" selected>option2&lt;/li>
        &lt;li value="3">option3&lt;/li>
        &lt;li value="4">option4&lt;/li>
    &lt;/ul>

这种情况单选时会自动添加一个input标签 &lt;input type="hidden" name="UserType"/>，
多选时会添加一个select标签&lt;select name="UserType" multiple>&lt;/select>

</pre>

</body>
</html>